import {
  Button,
  Form,
  Input,
  Card,
} from 'antd';
import React, { useCallback } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import styled from 'styled-components';
import actions from '../../store/authority/actions';

const StyledCard = styled(Card)`
margin:80px;
h2{
  text-align: center;
}
`
const AppLogin = (props) => {
  const { loginAdminAction } = props
  const [form] = Form.useForm()
  const handleSubmit = useCallback(async () => {
    try {
      // 执行表单验证
      const data = await form.validateFields()
      loginAdminAction(data)
    } catch (error) {
      console.log(error)
    }
  }, [])

  return (
    <StyledCard>
      <h2>系统管理系统系统</h2>
      <Form name="basic" labelCol={{ span: 8 }} wrapperCol={{ span: 8 }} form={form}>
        <Form.Item label="Username" name="adminname" rules={[{ required: true, message: 'Please input your username!' }]}>
          <Input />
        </Form.Item>

        <Form.Item label="Password" name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
          <Input.Password />
        </Form.Item>

        <Form.Item wrapperCol={{ offset: 8, span: 8 }}>
          <Button type="button" onClick={handleSubmit}>Submit</Button>
        </Form.Item>
      </Form>
    </StyledCard>
  );
};

export default connect(null, (dispath) => bindActionCreators(actions, dispath))(AppLogin);
